<template>
	<view class="page">
		<view class="pageH box hyy dis_f_l_c">
			<view class="addBtn dis_f_c_c" @click="addFun">
				<u-icon name="plus-circle" color="#79ab60" size="38"></u-icon>
			</view>
			<view class="search dis_f_l_c">
				<view class="left dis_f_c_c">
					<u-icon name="search"></u-icon>
				</view>
				<view class="center">
					<input type="text" v-model="keyword" placeholder="请输入要搜索的内容" placeholder-class="placeholder"
						confirm-type="search" @confirm="searchFun">
				</view>
				<view class="right dis_f_c_c" @click="clearFun" v-if="keyword">
					<u-icon name="close-circle" color="#aaa" size="26"></u-icon>
				</view>
			</view>
			<view class="searchBtn dis_f_c_c" @click="searchFun">
				<text>搜索</text>
			</view>
		</view>
		<view class="pageS">
			<view class="ul">
				<view class="li" v-for="(item,index) in listData" :key="index" @click="listClickFun(item)">

				</view>
			</view>
		</view>
		<view class="pageF">
			<more-data type="loading" v-if="hasMore"></more-data>
			<more-data type="noData" v-else-if="!listData.length">
				<text>暂无记录数据</text>
			</more-data>
			<more-data type="noMore" v-else></more-data>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	// 公用方法
	let {
		proxy
	} = getCurrentInstance();
	let $js = proxy.$js;
	// 用户信息Store
	import {
		useUserinfoStore
	} from '@/stores/userinfo'
	const userinfoStore = useUserinfoStore();
	
	// 页面加载
	onLoad(() => {
		// 获取列表数据
		getListDataFun();
	})
	
	// 是否为返回页面
	let back = false;
	// 页面显示
	onShow(() => {
	
		// 如果是返回当前页面，如果需要更新列表数据的话
		if (back) {
			// 获取列表数据
			getListDataFun(true);
		} else {
			back = true;
		}
	})
	
	// 是否正在获取列表数据，默认获取中
	let getListDataBr = true;
	// 获取列表数据数据
	let hasMore = ref(true);
	let page = 1;
	let listData = ref([]);

	// 获取列表数据，br为是否覆盖数据，默认不覆盖
	function getListDataFun(br = false) {
		// 正在获取数据
		getListDataBr = true;
		// 每页条数
		let pageSize = 10;
		// 如果需要覆盖数据
		if (br) {
			// 计算当前总条数
			pageSize *= page;
			// 重置页码
			page = 1;
			// 重置是否还有更多数据
			hasMore.value = true;
		}
		$js.ajax("GET", "aaaaaaaaaaaa", {
			keyword: keyword.value,
			pageNum: page,
			pageSize: pageSize,
		}).then((res) => {
			if (res.code == 200) {
				// 处理数据
				let list = res.rows;
				list.map((item) => {

				})
				// 如果覆盖数据
				if (br) {
					// 更新数据
					listData.value = list;
					// 重新计算页码
					page = Math.ceil(list.length / 10);
				} else {
					// 更新数据
					listData.value.push(...list);
				}
				// 如果没有更多数据了
				if (listData.value.length >= res.total) {
					hasMore.value = false;
				}
			} else {
				$js.tiShi(res.msg);
			}
			// 数据获取并处理完毕
			getListDataBr = false;
		})
	}
	
	// 列表的点击事件
	function listClickFun(item) {
		$js.open("/pages/mine/computeRecords/detail?id=" + item.id);
	}

	// 页面触底
	onReachBottom(() => {
		// 如果还有更多数据并且没有在获取数据
		if (hasMore.value && !getListDataBr) {
			page++
			getListDataFun();
		}
	})
	
	
	// 搜索关键字
	let keyword = ref("");
	// 点击搜索
	function searchFun() {
		// 重置
		page = 1;
		hasMore.value = true;
		listData.value = [];
		// 获取列表数据
		getListDataFun();
	}
	// 清空搜索
	function clearFun() {
		keyword.value = "";
		searchFun();
	}

	// 分享
	onShareAppMessage(() => {
		return $js.getShareObjFun();
	})
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 120rpx;
	}
	
	.pageH {
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		padding: 20rpx 0;
	
		.addBtn {
			flex: none;
			height: 100%;
			padding: 0 24rpx;
		}
	
		.searchBtn {
			flex: none;
			margin: 0 24rpx;
			width: 100rpx;
			height: 44rpx;
			border-radius: 22rpx;
			background: #79ab60;
			font-size: 22rpx;
			color: #fff;
		}
	
		.search {
			width: 100%;
			height: 60rpx;
			border-radius: 40rpx;
			border: 1px solid #eaeaea;
	
			.left {
				width: 60rpx;
			}
	
			.center {
				height: 100%;
				flex: 1;
				min-width: 0;
	
				input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding-left: 0;
				}
			}
	
			.right {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	
	.pageS {
		padding: 0 24rpx;
	
		.ul {
			.li {
				padding: 20rpx;
				border-radius: 10rpx;
				background: #fff;
				margin-bottom: 20rpx;
				font-size: 26rpx;
				line-height: 40rpx;
	
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.pageF {}
</style>